<template>
  <a-cell-group isCard title="基础用法">
    <a-input v-model="state.text" label="普通文本" placeholder="普通文本" />
    <a-input v-model="state.number" label="数字" type="number" placeholder="数字" />
    <a-input v-model="state.password" label="密码" type="password" placeholder="密码" />

    <a-input v-model="state.readonly" label="只读文本" readonly />
    <a-input v-model="state.disabled" label="禁用文本" disabled />
  </a-cell-group>

  <a-cell-group isCard title="带图标">
    <a-input v-model="state.text" label="普通文本" placeholder="普通文本" leftIcon="a-icon-check-item"></a-input>
    <a-input
      v-model="state.text"
      label="普通文本"
      placeholder="普通文本"
      leftIcon="a-icon-check-item"
      clearable
    ></a-input>
  </a-cell-group>

  <a-cell-group isCard title="带按钮">
    <a-input v-model="state.text" label="普通文本" placeholder="普通文本" clearable>
      <template #right>
        <a-button size="small" type="primary">短信验证</a-button>
      </template>
    </a-input>
  </a-cell-group>
</template>

<script>
import { defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      text: "",
      number: 0,
      tel: "",
      password: "",
      readonly: "只读普通文本",
      disabled: "禁用普通文本",
    });
    return {
      state,
    };
  },
});
</script>
